<template>
	<view class="mine-main">
		<view class="mine-top">
			<image class="avartar" :src="doctorInfo.headImgUrl" mode="scaleToFill"></image>
			<view class="users">
				<span class="users-name">{{doctorInfo.name}} <u-icon name="edit-pen" color="#010300" size="24"></u-icon></span>
				<span class="users-time">{{doctorInfo.officeName}}</span>
			</view>
		</view>
		<view class="m-list">
			<view class="m-item" v-for="item in tabsType" :key="item.name">
				<image :src="item.num" mode="widthFix"></image>
				<span class="m-name">{{item.name}}</span>
				<span class="m-tips">{{item.units}}</span>
			</view>
		</view>
		<tabbar :routePath="'/pages/connectMine/connectMine'" :typeBar="2" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				doctorInfo:{},
				tabsType: [{
						name: '文件',
						units:"病患报告集中管理",
						num:require('@/static/icon/doc2.png'),
					},
					{
						name: '待办',
						units:"病患报告集中管理",
						num:require('@/static/icon/doc1.png'),
					},
					{
						name: '日程',
						units:"查看近期行程安排",
						num:require('@/static/icon/doc3.png'),
					},
				],
			}
		},
		onShow() {
			let users  = uni.getStorageSync('doctorInfo')||null
			if(users){
				this.doctorInfo = JSON.parse(users)
				// console.log(this.doctorInfo)
			}else{
				this.doctorInfo= {}
			}
		},
		methods: {
                navigatorTo(){
					uni.navigateTo({
						url:"/pages/login/login"
					})
				}
		}
	}
</script>

<style lang="scss" scoped>
	.mine-main {
		padding: 0 30rpx;
		padding-bottom: 120rpx;
		padding-top: 60rpx;
		display: flex;
		flex-direction: column;
		gap: 30rpx;

		.mine-top {
			width: 100%;
			display: flex;
			gap: 40rpx;
			.avartar {
				width: 130rpx;
				height: 130rpx;
				border-radius: 50%;
			}

			.users {
				display: flex;
				flex-direction: column;
				gap: 30rpx;
				.users-name {
					display: flex;
					gap: 20rpx;
					font-size: 58rpx;
					font-weight: 600;
					color: #010300;
					line-height: 58rpx;
				}

				.users-time {
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: rgba(51,51,51,0.7);
					line-height: 28rpx;
				}

				.users-icon {
					margin-top: 20rpx;
					display: flex;
					gap: 20rpx;
				}
			}
		}
	    .m-list{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			gap: 20rpx 20rpx;
			margin-top: 80rpx;
			.m-item{
				width: calc(50% - 20rpx);
				border-radius: 15rpx;
				display: flex;
				flex-direction: column;
				padding: 30rpx;
				gap: 15rpx;
				background-color: #fff;
				box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0,0,0,0.02);
				image{
					width: 62rpx;
					height: 62rpx;
				}
				.m-name{
					font-size: 32rpx;
					// font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #000000;
				}
				.m-tips{
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}
		}
	}
</style>